<template>
   <div>
       <el-upload
           v-if="isDesign"
           class="designUploader"
           :action="`${baseURL}/user/upload`"
           :show-file-list="false"
           :headers="{Authorization:userInfo.authorization}"
           accept=".jpg,.png,.jpeg,.gif"
           :on-success="handleSuccess"
           >
           <img :src="themeImgBg">
       </el-upload>
       <el-upload
           v-else
           class="uploader"
           :action="`${baseURL}/food/upload`"
           :headers="{Authorization:userInfo.authorization}"
           accept=".jpg,.png,.jpeg"
           :file-list="fileList"
           list-type="picture-card"
           :on-preview="handlePreview"
           :before-remove="handleRemove"
           multiple
           :on-success="handleSuccess"
           :data="{sign}"
           >
           <i class="el-icon-plus"></i>
       </el-upload>
       <el-dialog append-to-body :visible.sync="dialogVisible">
           <img width="100%" :src="imageUrl" alt="">
       </el-dialog>
   </div>
</template>

<script>
import {getFoodImg,delFoodImg} from '@/api/food'
import {mapGetters} from "vuex";
export default {
    name: "upload",
    props:['sign','isDesign'],
    computed: {
        themeImgBg(){
            let realThemeImg=this.previewThemeImg || this.themeImg
            return /^\/assets/.test(realThemeImg)?this.domainUrl+realThemeImg:realThemeImg
        },
        ...mapGetters([
            'themeImg',
            'previewThemeImg'
        ])
    },
    data(){
        return {
            imageUrl:"",
            dialogVisible:false,
            fileList:[],
        }
    },
    created() {
        getFoodImg().then(res=>{
            this.fileList=res.data.filter(i=>i.includes(this.sign)).map(url=>({url:this.domainUrl+url}))
        })
    },
    methods:{
        handlePreview(file){
            this.imageUrl=/^blog:/.test(file.url) || file.url.includes(this.domainUrl)?file.url:this.domainUrl+file.url;
            this.dialogVisible = true;
        },
        handleRemove(file){
            return new Promise((resolve,reject) => {
                this.$alert(
                    `<strong style="color:#f56c6c;">确认删除此文件？</strong>`,
                    '提示',
                    {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    delFoodImg({path:file.url.replace(`${this.domainUrl}/`,'')}).then(res=>{
                        this.$message.success(res.msg)
                        resolve(true)
                    })
                }).catch(()=>{
                    reject(false)
                })
            })
        },
        handleSuccess(response, file, fileList){
            if(this.isDesign){
                this.$store.commit('exclude/SET_PREVIEW_THEME_BG',response.data)
                this.$emit('change')
            }else {
                fileList.splice(-1,1,{...file,url:/^blog:/.test(file.url) || file.url.includes(this.domainUrl)?response.data:this.domainUrl+response.data})
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .designUploader {
        >>> .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
                border-color: #409EFF;
            }
        }
        .el-icon-plus {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        img {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>